<template>
    <div class="content-wrapper">
        <!-- 待处理订单 -->
        <div class="dashboard-cards">
            <el-row :gutter="20">
                <el-col :span="6" v-for="(item, index) in cards" :key="index">
                    <el-card :body-style="{ padding: '0' }" :class="`card-${index + 1}`">
                        <div class="card-content">
                            <img :src="item.icon" alt="" class="card-icon" />
                            <div class="card-text">
                                <p>{{ item.title }}</p>
                                <h3>{{ item.value }}</h3>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 经营数据 -->
        <!-- <div class="dashboard">
            <div class="card-container">
                <div class="card" v-for="(item, index) in data" :key="index">
                    <img src="https://element-plus.org/v2/demo/images/icon1.png" alt="">
                    <div class="content">
                        <p>{{ item.title }}</p>
                        <h3>{{ item.value }}</h3>
                    </div>
                </div>

            </div>
        </div> -->
        <!-- 提现金额和待结算金额 -->
        <div class="custom-dashboard">
            <!-- 左右布局 -->
            <el-row :gutter="24" class="content-layout">
                <!-- 金额信息 -->
                <el-col :span="12">
                    <el-card shadow="hover" class="finance-box">
                        <h3>可提现金额</h3>
                        <p class="amount">{{ amount }}</p>
                        <div class="action-buttons">
                            <el-button type="primary" size="small">提现</el-button>
                            <el-button type="success" size="small">充值</el-button>
                        </div>
                    </el-card>
                </el-col>

                <!-- 店铺信息 -->
                <el-col :span="12">
                    <el-card shadow="hover" class="shop-info-box">
                        <template #header>
                            <span>店铺信息</span>
                        </template>
                        <div class="shop-details">
                            <div class="shop-name">
                                <img src="@/assets/images/avatar.gif" alt="Avatar" class="avatar" />
                                <span class="shop-name-text">{{ shopName }}</span>
                            </div>
                            <ul class="ratings">
                                <li v-for="(rating, index) in ratings" :key="index" class="rating-item">
                                    <div>{{ rating.label }}</div>
                                    <div>{{ rating.value }}</div>
                                </li>
                            </ul>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 图表区域 -->
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>销售额趋势</span>
                        </div>
                    </template>
                    <div ref="salesChart" style="height:300px;"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>访问量趋势</span>
                        </div>
                    </template>
                    <div ref="visitChart" style="height:300px;"></div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 捷入口 -->
        <div class="quick-entry-wrapper">
            <!-- 快捷入口 -->
            <div style="margin-bottom: 10px;font-size: 18px;">快捷入口 </div>

            <el-card style="max-width: 480px">
                <el-row :gutter="24" justify="space-around">
                    <el-col :span="10">
                        <el-card shadow="hover" class="action-card">
                            <el-button type="primary" size="large" icon="el-icon-plus"
                                @click="handleAddProduct">添加商品</el-button>
                        </el-card>
                    </el-col>
                    <el-col :span="10">
                        <el-card shadow="hover" class="action-card">
                            <el-button type="info" size="large" icon="el-icon-document-checked"
                                @click="handleBatchShipping">批量发货</el-button>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>


        </div>
    </div>
</template>
  
<script setup>
import { onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';
// import { it } from 'element-plus/es/locale';

const amount = ref('￥936,487.00');
const avatarUrl = ref('https://example.com/avatar.jpg'); // 示例头像URL
const shopName = ref('货集母婴专营店');
const ratings = ref([
    { label: '描述相符', value: '4.99' },
    { label: '物流服务', value: '4.99' },
    { label: '服务态度', value: '4.99' }
]);


const data = ref([
    {
        icon: 'https://element-plus.org/v2/demo/images/icon1.png',
        title: '付款订单（单）',
        value: '100'
    },
    {
        icon: 'https://element-plus.org/v2/demo/images/icon2.png',
        title: '付款金额（元）',
        value: '936,487.00'
    },
    {
        icon: 'https://element-plus.org/v2/demo/images/icon3.png',
        title: '支付买家数',
        value: '52'
    },
    {
        icon: 'https://element-plus.org/v2/demo/images/icon4.png',
        title: '商品访客数',
        value: '6,543'
    },
    {
        icon: 'https://element-plus.org/v2/demo/images/icon5.png',
        title: '商品浏览量',
        value: '87,324'
    }
]);

const cards = ref([
    {
        icon: '../../../static/icon/daijiedan.png',
        title: '待接单',
        value: '487'
    },
    {
        icon: '../../../static/icon/daifahuo.png',
        title: '待发货（单）',
        value: '100'
    },
   
    {
        icon: '../../../static/icon/peisongzhongxin-2.png',
        title: '配送中（单）',
        value: '52'
    },
    {
        icon: '../../../static/icon/tongjihuizong.png',
        title: '售后退款（单）',
        value: '6,543'
    }
]);

const withdrawableAmount = ref('936,487.00');
const settlementAmount = ref('863.00');

// 创建对图表容器的引用
const salesChart = ref(null);
const visitChart = ref(null);

// 初始化图表
const initCharts = () => {
    const salesChartInstance = echarts.init(salesChart.value);
    const visitChartInstance = echarts.init(visitChart.value);

    salesChartInstance.setOption({
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });

    visitChartInstance.setOption({
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '访问量',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210],
            areaStyle: {}
        }]
    });
};

onMounted(() => {
    initCharts();
});




const handleSettlement = () => {
    console.log('售后期自动解冻');
};
// 操作函数
const handleAddProduct = () => {
    console.log('点击了添加商品');
};

const handleBatchShipping = () => {
    console.log('点击了批量发货');
};
</script>
  
<style lang="scss" scoped>
@import "./index.scss";
</style>